<template>
	<div class="h-full">
		<div class="!<sm:hidden login !2xl:pr-[232px] 2xl:pt-[140px] !<2xl:pr-[165px] <2xl:pt-[114px] !<sm:justify-center !<sm:pr-0">
			<div class="login__box">
				<div class="login__box--title <sm:text-center">{{ title }}{{ $route.path === '/supplier' ? '-供应商' : $route.path === '/admin' ? '' : '-店铺' }}</div>
				<el-form ref="form" class="!w-[343px] !2xl:w-[462px]" :model="form" :rules="formRules">
					<el-form-item prop="username">
						<el-input v-model="form.username" placeholder="请输入您的账号" @keyup.enter.native="handleLogin">
							<svg-icon slot="prefix" color="#487fff" icon-class="loginUsers"></svg-icon>
						</el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input v-model="form.password" type="password" placeholder="请输入您的密码" @keyup.enter.native="handleLogin">
							<svg-icon slot="prefix" color="#487fff" icon-class="loginPassword"></svg-icon>
						</el-input>
					</el-form-item>
					<el-form-item class="!mb-[30px] !2xl:mb-[40px]" prop="code">
						<!-- <el-input v-model="form.code" placeholder="请输入您的验证码" @keyup.enter.native="handleLogin">
							<svg-icon slot="prefix" color="#487fff" icon-class="loginCode"></svg-icon>
							<div slot="suffix" class="login__box--code">
								<img :src="codeData" alt="" style="border-radius: 30px" class="w-[112px] h-[40px] !2xl:w-[165px] !2xl:h-[58px] cursor-pointer" @click="getCode" />
							</div>
						</el-input> -->
					</el-form-item>

					<el-form-item class="!2xl:mb-[40px]">
						<div class="flex items-center justify-between">
							<el-checkbox v-model="form.rememberMe" class="!text-[#487FFF] text-[12px] !2xl:text-[18px]">下次自动登录</el-checkbox>
							<div class="!text-[#487FFF] text-[12px] !2xl:text-[18px]">忘记密码？</div>
						</div>
					</el-form-item>
					<el-form-item>
						<el-button class="login__box--button" :loading="loading" @click.native.prevent="handleLogin">
							{{ loading ? '登录中' : '登录' }}
						</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
		<div class="!md:hidden h5__login">
			<div class="h5__login__top">
				<span>{{ title }}</span>
			</div>
			<div class="h5__login__form">
				<div class="h5__login__title">登录</div>
				<el-form ref="form" :model="form" :rules="formRules" label-width="100px">
					<el-form-item prop="username">
						<div class="h5__login__form__item">
							<div class="h5__login__form__item__left">
								<svg-icon color="#4C59C6" icon-class="loginUsers" size="17"></svg-icon>
							</div>
							<div class="flex-1">
								<el-input v-model="form.username" placeholder="请输入您的账号" @keyup.enter.native="handleLogin"> </el-input>
							</div>
						</div>
					</el-form-item>
					<el-form-item prop="password">
						<div class="h5__login__form__item">
							<div class="h5__login__form__item__left">
								<svg-icon color="#4C59C6" icon-class="loginPassword" size="17"></svg-icon>
							</div>
							<div class="flex-1">
								<el-input v-model="form.password" type="password" placeholder="请输入您的密码" @keyup.enter.native="handleLogin"> </el-input>
							</div>
						</div>
					</el-form-item>
					<el-form-item prop="code">
						<div class="h5__login__form__item">
							<div class="h5__login__form__item__left">
								<svg-icon color="#4C59C6" icon-class="loginCode" size="17"></svg-icon>
							</div>
							<div class="flex-1">
								<el-input v-model="form.code" placeholder="请输入验证码" @keyup.enter.native="handleLogin"> </el-input>
							</div>
							<div class="code">
								<img :src="codeData" alt="" style="border-radius: 30px" class="w-full h-full cursor-pointer" @click="getCode" />
							</div>
						</div>
					</el-form-item>
					<el-form-item>
						<el-button class="h5__login__submit" :loading="loading" @click.native.prevent="handleLogin">
							{{ loading ? '登录中' : '登录' }}
						</el-button>
					</el-form-item>

					<el-form-item class="!mb-0">
						<div class="text-center">忘记密码？</div>
					</el-form-item>
				</el-form>
				<l-dialog v-model="open" center :show-button="false" title="" width="410px" @close="handleClose" @formSubmit="handleClose">
					<slide-verify :l="42" :r="10" :w="350" :h="155" @success="onSuccess" @fail="onFail" @refresh="onRefresh" :slider-text="text"></slide-verify>
					<div>{{ msg }}</div>
				</l-dialog>
			</div>
		</div>
	</div>
</template>

<script>
import { getCodeImg } from '@/api/login';
import { decrypt, encrypt } from '@/utils';
import { VueSlideVerify } from 'vue-verify-code';
import Cookies from 'js-cookie';
export default {
	components: {
		VueSlideVerify,
	},
	data: () => ({
		open: false,
		msg: '',
		text: '向右滑',
		title: process.env.VUE_APP_BASE_APP_NAME,
		form: {
			username: null,
			password: null,
			code: null,
			uuid: null,
			rememberMe: false,
			store: 0,
		},
		formRules: {
			username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
			password: [{ required: true, trigger: 'blur', message: '密码不能为空' }],
			// code: [{ required: true, trigger: 'change', message: '验证码不能为空' }],
		},
		loading: false,
		redirect: null,
		codeData: null,
	}),

	computed: {
		username() {
			return this.$route.path === '/admin' ? 'username' : 'gysUsername';
		},
		password() {
			return this.$route.path === '/admin' ? 'password' : 'gysPassword';
		},
		rememberMe() {
			return this.$route.path === '/admin' ? 'rememberMe' : 'gysRememberMe';
		},
	},
	watch: {
		$route: {
			handler: function (route) {
				this.redirect = route.query && route.query.redirect;
			},
			immediate: true,
		},
	},

	created() {
		this.getCode();
		this.getCookie();
		localStorage.setItem('path', this.$route.path);
	},
	methods: {
		handleClose() {
			this.open = false;
		},
		onSuccess() {
			this.msg = '成功';
			this.open = false;
			this.handleLogin();
		},
		onFail() {
			this.msg = '';
		},
		onRefresh() {
			this.msg = '';
		},
		blur() {
			setTimeout(() => {
				const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
				window.scrollTo(0, Math.max(scrollHeight, 0));
			}, 100);
		},
		//验证码
		getCode() {
			getCodeImg({
				type: document.documentElement.clientWidth <= 640 ? 2 : 1,
			}).then((res) => {
				this.codeData = 'data:image/gif;base64,' + res.img;
				this.form.uuid = res.uuid;
			});
		},
		getCookie() {
			const username = Cookies.get(this.username);
			const password = Cookies.get(this.password);
			const rememberMe = Cookies.get(this.rememberMe);
			this.form = {
				...this.form,
				username: username === undefined ? this.form.username : username,
				password: password === undefined ? this.form.password : decrypt(password),
				rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
			};
		},

		//登录
		handleLogin() {
			this.$refs.form.validate((valid) => {
				if (valid) {
					if (this.form.rememberMe) {
						Cookies.set(this.username, this.form.username, { expires: 30 });
						Cookies.set(this.password, encrypt(this.form.password), {
							expires: 30,
						});
						// Cookies.set(this.rememberMe, this.form.rememberMe, {
						// 	expires: 30,
						// });
					} else {
						Cookies.remove(this.username);
						Cookies.remove(this.password);
						Cookies.remove(this.rememberMe);
					}
					if (this.msg != '成功') {
						console.log('不成功');
						this.open = true;
						return;
					}
					this.loading = true;

					if (this.$route.path === '/supplier') {
						this.form.store = 2;
					} else if (this.$route.path !== '/supplier' && this.$route.path !== '/admin') {
						this.form.store = 1;
					}

					this.$store
						.dispatch('Login', {
							userInfo: this.form,
							path: this.$route.path === '/admin' ? '/login' : this.$route.path === '/supplier' ? '/supplierLogin' : '/storeLogin',
						})
						.then(() => {
							this.$router.push({ path: '/home' });
						})
						.catch(() => {
							this.loading = false;
							this.getCode();
						});
				}
			});
		},
	},
};
</script>

<style scoped lang="scss">
.login {
	background: url(~@/assets/images/login/bg.png) no-repeat;
	background-size: 100% 100% !important;
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: flex-end;
	&__box {
		display: flex;
		flex-direction: column;
		//align-items: flex-end;
		&--title {
			color: #487fff;
			font-size: 42px;
			font-weight: 400;
			margin-bottom: 43px;
			font-family: Login;
			@apply 2xl:text-[56px] 2xl:my-[60px];
		}
		&--code {
			//background: #a7c1ff;
			width: 117px;
			height: 41px;
			display: inline-block;
			border-radius: 30px;
			@apply 2xl:w-[165px] 2xl:h-[58px];
		}
		&--button {
			width: 100%;
			height: 50px;
			border: none;
			background: linear-gradient(270deg, #487fff 0%, #8687f8 100%);
			border-radius: 35px;
			color: #ffffff;
			font-family: Microsoft YaHei-Regular, Microsoft YaHei;
			font-weight: 400;
			font-size: 20px;
			@apply 2xl:h-[60px] 2xl:text-[24px];
		}
		::v-deep {
			.el-form-item {
				margin-bottom: 24px;
				@apply 2xl:mb-[32px];
			}
			.el-checkbox {
				display: flex;
				align-items: center;
			}
			.el-checkbox__input {
				margin-top: 1px;
			}
			.el-checkbox__label {
				font-size: 12px;
				padding-left: 13px;
				@apply 2xl:text-[18px];
			}
			.el-checkbox__inner {
				border-radius: 6px;
				border: 1px solid #487fff;
			}
			.el-checkbox__input.is-checked + .el-checkbox__label {
				color: #487fff;
			}
			.el-checkbox__input.is-checked .el-checkbox__inner {
				border-color: #487fff;
				background-color: #487fff;
			}
			.el-input__suffix,
			.el-input__suffix-inner {
				display: flex;
				align-items: center;
			}
			.el-input {
				width: 100%;
				height: 50px;
				@apply 2xl:h-[60px];
				border: none;
				position: relative;
				&:before {
					content: '';
					height: 19px;
					width: 1px;
					background-color: #a7c1ff;
					position: absolute;
					left: 54px;
					top: 50%;
					transform: translateY(-50%);
					@apply 2xl:left-[72px];
				}
			}
			.el-input__prefix {
				padding-left: 24px;
				display: flex;
				align-items: center;
				left: 0;
				top: 0;
				@apply 2xl:text-[22px] 2xl:pl-[32px];
			}
			.el-input__inner {
				padding-left: 74px;
				background: rgba(227, 236, 255, 0.1);
				border-radius: 44px;
				height: 100%;
				color: #a5c0ff;
				font-size: 13px;
				border: 1px solid #a7c1ff;
				@apply 2xl:pl-[90px] 2xl:text-[20px];
				&::placeholder {
					color: #a5c0ff;
				}
			}
		}
	}
}
.h5__login {
	height: 100%;
	position: relative;
	background-color: #ffff;
	overflow: hidden;
	&__top {
		background: url(~@/assets/images/login/h5_bg.png) no-repeat;
		background-size: 100% 100% !important;
		height: 294px;
		width: 100%;
		position: relative;
		span {
			position: absolute;
			top: 110px;
			left: 24px;
			display: inline-block;
			font-weight: bold;
			width: 120px;
			font-size: 24px;
			font-family: AliHYAiHei-Regular, AliHYAiHei;
			color: #4c59c6;
			text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
		}
	}
	&__title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 20px;
	}
	&__form {
		background: #ffffff;
		box-shadow: 0 5px 12.5px 1px rgba(109, 133, 251, 0.15);
		margin: 0 24px;
		position: absolute;
		top: 233px;
		left: 0;
		right: 0;
		padding: 30px 24px 24px;
		&__item {
			//height: 45px;
			border-radius: 45px;
			border: 1px solid #efeef4;
			background: #f8f9fb;
			padding: 4px 4px 4px 0;
			display: flex;
			align-items: center;
			&__left {
				padding: 0 20px;
				position: relative;
				margin-right: 12px;
				&:after {
					content: '';
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 1px;
					height: 20px;
					background-color: #cccccc;
				}
			}
			.code {
				width: 79px;
				height: 37px;
				line-height: normal;
				display: flex;
				align-items: center;
				background: #4c59c6;
				border-radius: 45px;
			}
		}
		::v-deep {
			.el-form-item__content {
				margin-left: 0 !important;
			}
			.el-input__inner {
				border: none;
				background: #f8f9fb;
				height: 100%;
			}
			.el-input {
				height: 100%;
				display: flex;
				align-items: center;
			}
		}
	}
	&__submit {
		background: #4c59c6;
		width: 100%;
		height: 50px;
		color: #fff;
		border-radius: 45px;
		border: 1px solid #4c59c6 !important;
		box-shadow: 0 8px 15px 1px rgba(76, 89, 198, 0.3) !important;
		font-size: 16px;
	}
}
</style>
